import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { RouterStore } from 'mobx-react-router';
import ComponentStore, { MessageType } from '../../stores/ComponentStore';
import GraphDataStore, { AmountData } from '../../stores/GraphDataStore';
import CaseStore from '../../stores/CaseStore';
import { GraphProps } from '../../component/graph/graph';

import DataPicker from '../../component/data_picker/DataPicker';

import {
  SelectionType,
  subStationSelections,
  govDepartmentSelection,
  dateSelections,
  orgKindSelections,
  dateIntervalSelections
} from '../../utils/common';

import './Home.scss';

interface HomeProps {
  componentStore: ComponentStore;
  graphStore: GraphDataStore;
  routingStore: RouterStore;
  caseStore: CaseStore;
}

export interface GraphInfo {
  id: string;
  title: string;
  data?: AmountData;
}

const msgActiveStyle = {
  color: '#B96B91'
};

// 首页
@inject('componentStore', 'graphStore', 'routingStore', 'caseStore')
@observer
export default class Home extends Component<HomeProps> {
  componentWillMount(): void {
    this.props.componentStore.getMessageList();
    this.props.graphStore.getGraphSelectionData();
    this.props.graphStore.getCompletedData();
    this.props.graphStore.getCompletedAnalysis();
    this.props.graphStore.getAcceptedAnalysis();
    this.props.graphStore.getAcceptedData();
    this.props.graphStore.getHotRequestData();
    this.props.graphStore.getOrgHotRequestData();
  }
  routeTo = (title: string, path: string) => {
    const { caseStore, routingStore } = this.props;
    caseStore.setCaseListCategory(title);
    routingStore.push(path);
  }
  render(): JSX.Element {
    const { componentStore, routingStore, graphStore } = this.props;
    const msgList = componentStore.messageList;
    // 图表渲染列表
    const graphList: Array<GraphProps> = [
      {
        data: graphStore.caseAcceptedAnalysis,
        containerId: 'acceptedAnalysisGraph',
        graphType: 'bar',
        graphTitle: '受理量排行',
        graphSelections: [dateSelections, govDepartmentSelection]
      },
      {
        data: graphStore.caseCompletedAnalysis,
        containerId: 'completedAnalysisGraph',
        graphType: 'bar',
        graphTitle: '工单办结情况统计',
        graphSelections: [dateSelections, govDepartmentSelection]
      },
      {
        data: graphStore.hotRequestData,
        containerId: 'hotRequestGraph',
        graphType: 'bar',
        graphTitle: '热点诉求统计',
        graphSelections: [dateSelections, orgKindSelections]
      },
      {
        data: graphStore.orgHotRequestData,
        containerId: 'orgHotRequestGraph',
        graphType: 'bar',
        graphTitle: '承办单位热点诉求',
        graphSelections: [dateSelections, govDepartmentSelection]
      }
    ];
    // 同步到graphStore
    graphStore.setGraphList(graphList);
    const Selections: SelectionType[][][] = [dateSelections, dateIntervalSelections, subStationSelections];
    return (
      <div className="home-container">
        <div className="department-auth">所属部门: 市公安局</div>
        <div className="data-container">
          <div className="case-header">
            {
              Selections.map(
                (v: SelectionType[][], index: number) => (
                  <DataPicker
                    className="picker-class"
                    graphSelections={v}
                    isCascade={false}
                    key={index}
                    pickerType={v[0][0].label !== 'date'}
                  />
                ))
            }
          </div>
          <div className="case-handle-container">
            <header className="subTitle">工单办理统计</header>
            <div className="grid-line" />
            <div className="data-table">
              <div>已受理：<span
                className="link-color"
                onClick={() => {
                  this.routeTo('已受理', '/case_list');
                }}
              >
                2057
              </span> 个</div>
              <div>受理量排名：
                <span
                  className="link-color"
                  onClick={
                    () => {
                      componentStore.setGraphListIndex(0);
                      this.routeTo('受理量排名', '/rank');
                    }}
                >
                  2
                </span>
              </div>
              <div>已办结：
                <span
                  className="link-color"
                  onClick={
                    () => {
                      this.routeTo('已办结工单', '/case_list');
                    }}
                >6407
                </span> 个
              </div>

              <div>未办结：
                <span
                  className="link-color"
                  onClick={
                    () => {
                      this.routeTo('未办结工单', '/case_list');
                    }
                  }
                >114
                </span> 个</div>

              <div>超期工单：
                <span
                  className="link-color"
                  onClick={() => this.routeTo('超时工单', '/over_time')}
                >512
                </span> 个</div>
              <div>按时办结率：<span>97.96%</span></div>
              <div>退单：<span className="link-color">929</span> 个</div>
              <div>退单率：<span>8.93%</span></div>
            </div>
          </div>

          <div className="case-handle-container">
            <header className="subTitle">工单满意度统计
              <span 
                className="more-btn"
                onClick={() => { this.routeTo('工单满意度统计', '/unsatisfy'); }}
              >更多
              </span>
            </header>
            <div className="grid-line" />
            <div className="data-table">
              <div>及时联系率：<span>99.84%</span></div>
              <div>作风满意率：<span>94.32%</span></div>
              <div>结果满意率：<span>92.82%</span></div>
              <div>综合满意率：<span>97.96%</span></div>
              <div className="mergeLine">首次办理结果满意度：<span>76.58%</span></div>
              <div className="mergeLine">首次办理不满意工单：
                <span
                  className="link-color"
                  onClick={() => this.routeTo('不满意工单', '/unsatisfy_list')}
                >1381
                </span></div>
              <div className="mergeLine">占比：<span>21.48%</span></div>
            </div>
          </div>
          <div className="case-handle-container">
            <header className="subTitle">绩效考核统计
              <span
                className="more-btn"
                onClick={() => { this.routeTo('绩效考核详情', '/kpi_details'); }}
              >更多
              </span></header>
            <div className="grid-line" />
            <div className="data-table">
              <div>派单总数：<span>7278</span> 个</div>
              <div>办结总数：<span>6478</span> 个</div>
              <div>总分：<span>993.18</span> 分</div>
              <div>总排名：
                <span className="link-color" onClick={() => { this.routeTo('绩效考核总分排名', '/kpi_rank'); }}>9
                </span></div>
            </div>
          </div>
          <div className="case-handle-container">
            <div className="subTitle">重要通知</div>
            <div className="grid-line" />
            <div className="msg-contents">
              <div className="msg-list">
                {
                  msgList.map((v: MessageType, i: number) => (
                    <div
                      onClick={
                        () => {
                          componentStore.setMessageListIndex(i);
                          routingStore.push('/message/' + i);
                        }}
                      key={i}
                      className="msg-item"
                      style={i === componentStore.messageListIndex ? msgActiveStyle : undefined}
                    >
                      {i + 1}.{v.title}
                    </div>
                  ))
                }
              </div>
            </div>

          </div>
        </div>
      </div>
    );
  }
}